<%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2022/12/29
  Time: 11:37
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%String path = request.getContextPath()+"/";%>
<!doctype html>
<html>
<head>
    <title>Title</title>
    <base href="<%=path%>">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.21.2/dist/bootstrap-table.min.css">
    <link rel="stylesheet" href="static/ztree/css/zTreeStyle/zTreeStyle.css">
    <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</head>
<style>
.query{
    height: 54px;
    border-radius: 6px;
    padding: 10px 10px;
    box-shadow: 1px 1px 3px rgb(0 0 0 / 20%);
}
</style>
<body>
<div class="container-fluid">
   <div class="row" >
       <div class="col-xs-12" style="background-color: #f3f3f4;padding:0px 0px;">
           <div style="height:800px;margin: 15px 15px;background-color: #f3f3f4">
               <div class="row" style="padding: 0px 15px 15px 15px;">
                   <div class="col-xs-12 query" style="background-color: #ffffff">
                       <form class="form-inline" id="queryForm">
                           <div class="form-group">
                               <label >角色名称</label>

                               <input type="text" name="roleName" class="form-control"  placeholder="登录名">
                           </div>
                           <button type="button" class="btn btn-primary " onclick="$.table.search();"><span class="glyphicon glyphicon-search"></span>搜索</button>

                           <button type="button" class="btn btn-success" onclick="$.table.reset();"><span class="glyphicon glyphicon-refresh"></span>重置</button>
                       </form>
                   </div>
               </div>
               <div class="row" style="padding: 0px 15px;">
                   <div class="col-xs-12" style="background-color: #ffffff;padding-top:10px; ">
                       <table id="table"></table>
                       <div id="toolbar">
                           <button type="button" class="btn btn-primary btn-xs" onclick="$.modal.openWin('新增角色信息','role/toAdd');"><span class="glyphicon glyphicon-plus"></span>新增</button>
                           <button type="button" class="btn btn-primary btn-xs" onclick="edit2();"><span class="glyphicon glyphicon-edit" ></span>编辑</button>
                           <button type="button" class="btn btn-primary btn-xs" onclick="deletes();"><span class="glyphicon glyphicon-trash"></span>删除</button>
                           <button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-save"></span>导入</button>
                           <button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-open"></span>导出</button>

                       </div>
                   </div>

               </div>
           </div>
       </div>
   </div>
</div>
</body>
<script src="https://unpkg.com/bootstrap-table@1.21.2/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.21.2/dist/bootstrap-table-locale-all.min.js"></script>
<script src="static/js/layer/layer.js"></script>
<script src="static/ztree/js/jquery.ztree.core.js"></script>
<script src="static/js/sofwin.js"></script>
<script>
    function refresh(){
        $.table.search();
    }
    function edit(id){
        $.modal.openWin("编辑角色信息","role/toAdd?id="+id);
    }
    function deletes(){
        var rows = $table.bootstrapTable('getSelections');
        // 判断rows的长度如果不等于1 ，提示请选择需要修改的一条数据
        if(rows.length==0){
            layer.msg('请选择需要删除的数据');
            return;
        }
        // 有选择的的数据
        var url='role/delete?';
        for(var i=0;i<rows.length;i++){
            url+="ids="+rows[i].id+"&";
        }
        $.operator.delete(url);
    }
    function edit2(){
        var rows = $table.bootstrapTable('getSelections');
        // 判断rows的长度如果不等于1 ，提示请选择需要修改的一条数据
        if(rows.length==0){
            layer.msg('请选择需要编辑的数据');
            return;
        }
        if(rows.length>1){
            layer.msg("请最多选择一条需要编辑的数据");
            return;
        }
        edit(rows[0].id);
        // 如果rows的长度==1 【0】对象是不是就是当前的用户信息，可以获取到当前用户的id

    }
    var options = {
      url:'role/data',
      columns: [{
          checkbox: true
      },{
          field: 'id',
          title: '角色ID'
      }, {
          field: 'roleName',
          title: '角色名'
      }, {
          field: 'permission',
          title: '权限字符',
          // 不显示在下拉列表中
          switchable: false
      }, {
          field: 'sort',
          title: '显示顺序'
          // 不显示在下拉列表中
      } , {
              field: 'bz',
              title: '备注'
              // 不显示在下拉列表中
          },{
          field: 'status',
          title: '状态',
          formatter:function(value,row,index,field){
              if(value==0){
                  return '启用';
              }
              return '禁用';
          }
      },{
          title:'操作',
          width: 200,
          align: 'center',
          formatter:function(value,row,index,field){
              return '<button type="button" class="btn btn-primary btn-xs" onclick="edit('+row.id+');"><span class="glyphicon glyphicon-edit" ></span>编辑</button>'+
                  '&nbsp;&nbsp;<button type="button" class="btn btn-primary btn-xs" onclick="$.operator.delete(\'role/delete/'+row.id+'\')"><span class="glyphicon glyphicon-trash" ></span>删除</button>';
          }
      }]
    };
    $.table.init(options);

</script>
</html>
